<template>
  <view>
    <wd-form ref="form" :model="info">
      <wd-cell-group border>
        <wd-picker label="设备" label-width="100px" prop="mdDeviceId" v-model="info.mdDeviceId"
                   :columns="machineList" placeholder="请选择设备"
                   :rules="[{ required: true, message: '请选择设备' }]"/>
        <wd-textarea label="问题描述" label-width="100px" prop="descript" v-model="info.descript" placeholder="问题描述"
                     :rules="[{ required: true, message: '请填写问题描述' }]"/>
        <wd-cell title="图片" title-width="100px" prop="photos"
                 :rules="[{ required: true, message: '请上传设备维修图片' }]">
          <wd-upload :file-list="info.photos" :action="fileUploadAction" multiple :header="header"
                     @success="handleFileSuccess"></wd-upload>
        </wd-cell>
      </wd-cell-group>
      <view class="mtp mxp">
        <wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
      </view>
    </wd-form>
  </view>
</template>

<script setup>
import {
  reactive,
  ref
} from 'vue';
import apiService from '@/api/server';
import deviceRepairApiService from "@/api/maintenance.js"
import {API_BASE_URL} from "@/utils/request.js"

const fileUploadAction = ref(`${API_BASE_URL}/tbx/sys/common/upload`)
const header = ref({
  'X-Access-Token': uni.getStorageSync('etoken')
})
const info = reactive({
  "descript": "",
  "mdDeviceId": "",
  "mdDeviceName": "",
  "photos": [],
  photo: [],
  "status": "",
})

const action = ""
const machineList = ref([
  {
    label: '',
    value: ''
  },
])

const getMachineList = () => {
  apiService.getList('61c87a2f1f0046b2a0d93f0612ee5ac9', {
    hasQuery: true,
    column: "id",
    order: "asc",
    pageNo: 1,
    pageSize: 20
  }).then(res => {
    let data = []
    res.records.map(item => {
      data.push({
        label: `${item.cu_store_id_dictText}-${item.code}`,
        value: item.id
      })
    })
    machineList.value = data
  })
}


const handleFileSuccess = ({fileList}) => {

  let list = []
  fileList.map(({response}) => {
    try {
      const fileRes = JSON.parse(response)
      list.push(`${API_BASE_URL}/tbx/${fileRes.message}`)
    } catch (err) {
      console.error("返回的格式不正确！", response)
    }
  })
  info.photo = list
}

const handleSubmit = (e) => {
  let photos = info.photo.join(",")
  if (info.mdDeviceId.length <= 0) {
    uni.showToast({
      icon: "none",
      title: "请先选择设备"
    })
    return;
  }
  if (info.descript.length <= 0) {
    uni.showToast({
      icon: "none",
      title: "请先输入问题描述"
    })
    return;
  }
  if (photos.length <= 0) {
    uni.showToast({
      icon: "none",
      title: "请拍摄相关问题图片"
    })
    return;
  }

  deviceRepairApiService.add({
    "descript": info.descript,
    "mdDeviceId": info.mdDeviceId,
    "photos": photos,
    "status": 2,
  }).then(res => {
    uni.showToast({
      icon: "none",
      title: "添加成功"
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 50)
  })
}

getMachineList()
</script>

<style>

</style>
